<template>
    <a-modal v-model:visible="visible" title="选择面试">
      <a-table
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="data"
        :pagination="false"
        :scroll="{ y: '50vh' }"
        rowKey="id"
        size="small"
      >
      </a-table>
      <template #footer>
        <a-button key="back" @click="goAddInterview">去新建面试</a-button>
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
      </template>
    </a-modal>
  </template>
  <script lang="ts">
  import { message } from "ant-design-vue";
  import { defineComponent, onUpdated, ref, Ref } from "vue";
  import { useRouter } from "vue-router";
  import { get } from "../utils/request/request";
  
  interface DataType {
    id: number;
    title: string;
    status: number;
    create_by: string;
  }
  
  interface SelectType {
    id: number;
    title: string;
    status: number;
    create_by: string;
  }
  
  const useTabelEffect = (token: string, emit: any) => {
    const columns = [
      { title: "招新标题", dataIndex: "title", align: "center", width: "35%" },
      { title: "状态", dataIndex: "status", align: "center", width: "25%" },
      { title: "创建人", dataIndex: "create_by", align: "center", width: "25%" },
      { title: "填写份数", dataIndex: "count", align: "center", width: "20%" },
    ];
    let data: Ref<DataType[]> = ref([]);
  
    const rowSelection = {
      type: "radio",
      start: (selectedRows: DataType[]) => {
        setTimeout(() => {
          selectedRows = [];
        }, 1000);
      },
      onChange: (selectedRows: DataType[]) => {
        // console.log("selectedRows: ", selectedRows[0]);
      },
      onSelect: (record: SelectType) => {
        emit("chosTitle", record);
      },
    };
    const getData = async () => {
      const res: any = await get(
        "/admin/api/v1/recruitment/list?page=1&limit=1000",
        token
      );
      if (!res?.data) {
        message.warn("没有招新数据");
      } else {
        const modifiedData = res.data;
        modifiedData.forEach((interview: any) => {
          if (interview.status === 0) {
            interview.status = "未开始";
          } else if (interview.status === 1) {
            interview.status = "可报名";
          } else if (interview.status === 2) {
            interview.status = "停止报名";
          } else if (interview.status === 3) {
            interview.status = "已结束";
          } else {
            interview.status = "不在小程序首页显示";
          }
        });
        data.value = modifiedData;
      }
    };
    return {
      data,
      columns,
      rowSelection,
      getData,
    };
  };
  
  const useModalEffect = (chosTitle: string, emit: any) => {
    const router = useRouter();
    const visible = ref<boolean>(false);
    const showModal = () => {
      visible.value = true;
    };
    const goAddInterview = () => {
      router.push({name:'interviewList',params:{status:0}})
    }
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      if (chosTitle == "") {
        emit("chosTitle", {
          id: undefined,
          title: "",
        });
      }
    };
    return {
      visible,
      showModal,
      goAddInterview,
      handleOk,
      handleCancel,
    };
  };
  
  export default defineComponent({
    emits: ["chosTitle"],
    props: ["chosTitle"],
    setup(props, { emit }) {
      const token: string = localStorage.getItem("token") as string;
      const { visible, showModal,goAddInterview, handleOk, handleCancel } = useModalEffect(
        props.chosTitle,
        emit
      );
      const { data, columns, rowSelection, getData } = useTabelEffect(
        token,
        emit
      );
      onUpdated(() => {
        if (visible.value) {
          getData();
        }
      });
      return {
        visible,
        showModal,
        goAddInterview,
        handleOk,
        handleCancel,
        data,
        columns,
        rowSelection,
      };
    },
  });
  </script>
  
  